<ol
  class="relative space-y-8 before:absolute before:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200"
>
  <li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
    <div
      class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
    >
      <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

      <div class="-mt-2">
        <time class="text-xs/none font-medium text-gray-700">12/02/2025</time>

        <h3 class="text-lg font-bold text-gray-900">Kickoff</h3>

        <p class="mt-0.5 text-sm text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
          adipisci tenetur sunt quae exercitationem sed pariatur porro!
        </p>
      </div>
    </div>

    <div aria-hidden="true"></div>
  </li>

  <li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
    <div
      class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
    >
      <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

      <div class="-mt-2">
        <time class="text-xs/none font-medium text-gray-700">5/03/2025</time>

        <h3 class="text-lg font-bold text-gray-900">First Milestone</h3>

        <p class="mt-0.5 text-sm text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
          adipisci tenetur sunt quae exercitationem sed pariatur porro!
        </p>
      </div>
    </div>

    <div aria-hidden="true"></div>
  </li>

  <li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
    <div
      class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
    >
      <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

      <div class="-mt-2">
        <time class="text-xs/none font-medium text-gray-700">24/04/2025</time>

        <h3 class="text-lg font-bold text-gray-900">Launch</h3>

        <p class="mt-0.5 text-sm text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
          adipisci tenetur sunt quae exercitationem sed pariatur porro!
        </p>
      </div>
    </div>

    <div aria-hidden="true"></div>
  </li>
</ol>
